<script setup>
import 'video.js/dist/video-js.css'
import videojs from 'video.js'

import { ref, reactive, onMounted } from "vue";
import io from "socket.io-client";
import { useStore } from '../../store/index'
let store = useStore();
let source = ref('')
let myVideo = reactive(null)
let videoTag = ref('')
onMounted(async () => {
    console.log(source.value.src = 'http://buvyvlev25pt.guyubao.com/chunk/index.m3u8');
    store.socket = io("http://buvyvlev25pt.guyubao.com"); // 连接后端的 socket.io 方法里面传服务端的ip
    // 初始化连接
    store.socket.on("connect", async () => {
        console.log(store.socket.id, "监听客户端连接成功-connect");

        const myVideoOptions = {
            bigPlayButton: true, // 是否显示播放按钮（这个播放按钮默认会再左上方，需用CSS设置居中）
            textTrackDisplay: true,
            preload: 'none',
            posterImage: true,
            errorDisplay: true,
            controlBar: true,
            autoplay: false, // 不设置自动播放，若未true，则无法看到视频海报图片
            controls: true,
            controls: true, //是否显示底部控制栏：true/false
            width: document.documentElement.clientWidth, //视频播放器显示的宽度
            height: 300, //视频播放器显示的高度
        }
        myVideo = videojs('my-video', myVideoOptions)
        console.log(myVideo, 'myVideo');
        myVideo.on("pause", function () {
            console.log("点击暂停");
            // 发送暂停事件
            store.socket.emit("pause")
        })
        myVideo.on("play", function () {
            console.log("点击播放");
            // 发送暂停事件
            store.socket.emit("play")
        })

        let preTime = 0
        myVideo.on("timeupdate", function (res) {
            console.log(myVideo.currentTime());
            // 检查进度是否发生变化
            let timeChange = Math.abs(myVideo.currentTime() - preTime);
            if (timeChange > 6) {
                // 发送 
                store.socket.emit("seek", myVideo.currentTime());
                preTime = myVideo.currentTime();
            }
            console.log("视频播放中");

            // 监听进度切换指令
            store.socket.on("seek", function (time) {
                console.log("接收到进度切换指令:", time);
                myVideo.currentTime(time)
            });
        })

        myVideo.on("progress", function () {
            console.log("正在请求数据 ");
            // myVideo.pause()
        })
        // 获取服务端的数据
        store.socket.on('videoData', (data) => {
            console.log('获取服务端的数据', data);
            store.serviceVideoData = data
        })
        // 监听播放指令
        store.socket.on("play", function () {
            console.log("接收到播放指令");
            myVideo.play();
        });

        // 监听暂停指令
        store.socket.on("pause", function () {
            console.log("接收到暂停指令");
            myVideo.paused();
        });


        // 断开连接
        store.socket.on("disconnect", () => {
            console.log('断开连接');
        });
    });
});


</script>
<template>
    <video id="my-video" ref="videoTag" class="video-js vjs-default-skin" controls preload="none" x5-playsinline=""
        webkit-playsinline="" playsinline="" poster="" x-webkit-airplay="allow">
        <source ref="source" :src='store.serviceVideoData.videoUrl'>
    </video>
</template>